<template>
  <page-card :title="menuName">
    <!-- 头部栏位 -->
    <a-row style="margin-bottom: 20px">
      <!-- 空行 -->
      <a-col :span="20"></a-col>
      <!-- 搜索框 -->
      <a-col :span="4">
        <a-input-search placeholder="账号"
                            v-model="searchName"
                            @search="search"
                            style="min-width:200px;width: 100%"
                            allow-clear />
      </a-col>
    </a-row>
    <!-- 表格  -->
    <a-table :columns="tableColumns" :data-source="tableDataSearch" :pagination="false" >
        <template slot="action" slot-scope="text, record">
          <!-- 解锁 -->
          <a-popconfirm title="确定要解锁吗？"
                        ok-text="是"
                        cancel-text="否"
                        @confirm="deblock(record)">
            <a>解锁</a>
          </a-popconfirm>
        </template>
      </a-table>
  </page-card>
</template>

<script>

// 1、引入Vue等框架组件库或插件
// 2、引入自定义组件
// 3、引入第三方工具类插件
// 4、引入自定义工具或插件或混入或基类等
// 5、引入API
import { getLockList, deblock } from "../../api/accountlock";
// 分页信息
export default {
  /* 账号解锁，登录时输错次数了 被锁定的账号 */
  name: 'Accountunlock',
  data () {
    return {
      searchName: undefined,
      searchText: '',
      tableData: [],
      tableColumns: [
        {
          dataIndex: 'account',
          title: '锁定账号',
          align: 'center',
          key: 'account'
        },
        {
          dataIndex: 'fullname',
          title: '账号用户',
          align: 'center',
          key: 'fullname'
        },
        {
          dataIndex: 'lockTime',
          title: '锁定时间',
          align: 'center',
          key: 'lockTime'
        },
        {
          dataIndex: 'unLockTime',
          title: '解锁时间',
          align: 'center',
          key: 'unLockTime'
        },
        {
          dataIndex: 'option',
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          key: 'option'
        },
      ]
    }
  },
  computed: {
    // 菜单名字
    menuName(){
      return this.$route.meta.title || this.$route.name
    },
    tableDataSearch(){
      return this.tableData.filter(item => item.account.includes(this.searchText) ||  item.fullname.includes(this.searchText))
    }
  },
  mounted () {
    this.getLockList()
  },
  methods: {
    /* 获取数据 */
    getLockList(){
      getLockList().then(res => {
        this.tableData = res
      })
    },
    /* 搜索 */
    search(){
      this.searchText = this.searchName || ''
    },
    /* 解锁 */
    deblock(row){
      deblock(row.account).then(res => {
        this.getLockList()
      })
    }
  },
}
</script>

<style lang="less" scoped>
</style>